<!-- script 标签：写 JavaScript 代码 -->
<script setup>
// 导入所需资源
import {onMounted, reactive, ref} from "vue";

// 声明一个变量
let info = "今天天气非常好~~~222333";

// 声明一个变量，测试响应式提出的问题
let number = 0;

// 声明一个变量，接收 ref() 包装后得到的对象
let refNumber = ref(0);

let refObj = ref({
  stuId: 100,
  stuName: "小强",
  stuSubject: "Java"
});

// 使用 reactive() 包装希望实现响应式的对象
let farmer = reactive({
  farmerId: 777,
  farmerName: "小王",
  farmerSubject: "农业科技"
});

let toolArr = reactive(["锄头", "铁锤", "镰刀"]);

// 声明一个变量 age 测试条件渲染
let age = 20;

// 声明一个数组，测试列表渲染
let dataArr = [
  {weaponId:35, weaponName:"gun", weaponPrice:1255},
  {weaponId:36, weaponName:"stick", weaponPrice:2354},
  {weaponId:37, weaponName:"sword", weaponPrice:1705},
  {weaponId:38, weaponName:"bread", weaponPrice:8892},
  {weaponId:39, weaponName:"wind", weaponPrice:4356}
];

// 声明一个函数
function showNumber() {
  return 100000;
}

// 声明一个字符串，值是一段 HTML 代码
let code = "<span style='color:blue;font-size: 35px;'>Hello HTML</span>";

// 声明一个字符串，值是一段 CSS 样式代码
let styleCode = "color: blue;font-size: 35px;";

// 声明一个字符串，用来渲染单行文本框的 value 属性值
let empName = "harry";

// 声明一个函数，作为按钮的单击响应函数
const btn01ClickHandler = () => {
  alert("你点击了一个可爱的按钮~~~");
};

const btn02ClickHandler = () => {
  alert("你点击了一个疯狂的按钮~~~")
}

const inputChangeHandler = function () {
  // 此时 this 就不再指向文本框的元素节点对象，所以也无法通过 this.value 获取文本框的新值
  // 所以想要获取用户在表单项中输入的数据，需要借助后面的『双向绑定』
  alert("你修改了文本框的值~~~" + this);
}

const anchorClickHandler = (event) => {
  // confirm() 弹出确认框，用户点击确定返回 true；点击取消返回 false
  let confirmResult = confirm("您真的要删除这条记录吗？");
  if (!confirmResult) {
    // 阻止超链接跳转，也就是不执行删除
    event.preventDefault();
  }
}

const btnSubmitClickHandler = () => {
  let flag = false;
  if (!flag) {
    event.preventDefault();
  }
}

const btnHandsomeClickHandler = () => {
  alert("你点击了一个英俊的按钮~~~");
}

const btnNumberClickHandler = () => {
  number++;
  console.log(number)
}

const btnRefNumberClickHandler = () => {
  // 在 JavaScript 代码中，ref() 包装的对象想要修改被包装的值，必须通过 value 属性
  refNumber.value++
}

const btnRefObjClickHandler = () => {
  // 下面三行代码证明 ref() 包装的对象的属性支持响应式
  refObj.value.stuId = 200;
  refObj.value.stuName = "大强";
  refObj.value.stuSubject = "AI";

  // 下面代码证明 ref() 包装的对象本身也支持响应式
  refObj.value = {
    soldierId: 666,
    soldierName: "大军",
    soldierWeapon: "99A"
  };
}

const btnReactiveObjHandler = () => {
  farmer.farmerId = 888;
  farmer.farmerName = "老王";
  farmer.farmerSubject = "养猪秘籍";
}

const btnReactiveArrHandler = () => {
  // 准备一个新数组存放假数据（要存入响应式数组中的）
  let newArr = ["电脑", "手机", "平板"];

  // 把存放新数据的数组存入响应式数组中
  toolArr.push(...newArr);
}

// 调用生命周期的钩子函数，在组件加载完成后执行我们的操作
onMounted(()=>{
  // 在回调函数中编写我们要执行的代码
  alert("onMounted()钩子函数生效了~~~~~~~~~~~");
});
</script>

<!-- template 标签：写 HTML 代码 -->
<template>
  <!-- template 标签内部最好只有一个根标签 -->
  <div>
    <h3>实验01：插值表达式(基础用法)</h3>
    <p>------{{ info }}-------</p>
    <h3>实验02：插值表达式(表达式)</h3>
    <p>{{ info == null }}</p>
    <h3>实验03：插值表达式(调用函数)</h3>
    <p>{{ showNumber() }}</p>

    <h3>实验04：v-text渲染文本</h3>
    <p v-text="info"></p>
    <p v-text="showNumber()"></p>

    <h3>实验05：v-html渲染文本</h3>
    <p v-text="code"></p>
    <p v-html="code"></p>

    <h3>实验06：属性渲染</h3>
    <p style="color: brown;font-size: 35px;">国破山河在</p>

    <!-- 完整写法：在 HTML 标签原本属性名的前面加 v-bind: -->
    <p v-bind:style="styleCode">城春草木深</p>

    <!-- 简略写法：省略 v-bind 部分，只写冒号 -->
    <p :style="styleCode">感时花溅泪</p>

    <!-- 渲染表单项的 value 属性举例 -->
    <input type="text" value="单行文本框的默认值"/>
    <br/>
    <input type="text" v-bind:value="empName"/>

    <h3>实验07：事件绑定(基础操作)</h3>
    <!-- v-on:事件名称 -->
    <!-- 事件名称 = HTML 事件属性 - on -->
    <!-- click = onclick - on -->
    <button v-on:click="btn01ClickHandler">一个可爱的按钮</button>
    <button @click="btn02ClickHandler">一个疯狂的按钮</button>
    <input type="text" @change="inputChangeHandler" value="后羿射日~~~"/>

    <h3>实验08：事件绑定(阻止控件默认行为)</h3>
    <p>控件默认行为一：点击超链接跳转页面</p>
    <a href="http://www.baidu.com">点击超链接前往百度</a><br/>

    <!-- 框架提供的事件属性：@click.prevent 是彻底封死 -->
    <a href="http://www.baidu.com" @click="anchorClickHandler($event)">点击删除一条记录</a>

    <p>控件默认行为二：点击表单的提交按钮提交表单</p>
    <form action="http://www.baidu.com">
      <button type="submit" @click="btnSubmitClickHandler">点击提交表单</button>
    </form>

    <h3>实验09：事件绑定(一次性绑定)</h3>
    <button @click.once="btnHandsomeClickHandler">一个英俊的按钮</button>

    <h3>实验10：响应式(提出问题)</h3>
    <button @click="btnNumberClickHandler">点击按钮，数值+1：{{ number }}</button>

    <h3>实验11：响应式(ref包装基本数据类型)</h3>
    <button @click="btnRefNumberClickHandler">点击按钮，数值+1：{{ refNumber }}</button>

    <h3>实验12：响应式(ref包装引用类型)</h3>
    <p>{{ refObj }}</p>
    <button @click="btnRefObjClickHandler">点击按钮修改对象的值</button>

    <h3>实验13：响应式(reactive操作对象)</h3>
    <p>{{farmer}}</p>
    <button @click="btnReactiveObjHandler">点击按钮修改对象的属性值</button>

    <h3>实验14：响应式(reactive操作数组)</h3>
    <p>{{toolArr}}</p>
    <button @click="btnReactiveArrHandler">点击修改数组数据</button>

    <h3>实验15：条件渲染，测试 v-if</h3>
    <p v-if="age < 18">童工不能干活儿[单独使用if]</p>
    <p v-if="age >= 18">成年了，可以干活儿[单独使用if]</p>

    <p v-if="age < 18">童工不能干活儿[使用if-else]</p>
    <!-- 注意：v-if 和 v-else 之间不能写任何非空白字符（注释可以） -->
    <p v-else>成年了，可以干活儿[使用if-else]</p>

    <p v-show="age < 18">我今年{{age}}岁了</p>

    <h3>实验16：列表渲染</h3>
    <table>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>PRICE</th>
      </tr>
      <tr v-for="weapon in dataArr">
        <td>{{weapon.weaponId}}</td>
        <td>{{weapon.weaponName}}</td>
        <td>{{weapon.weaponPrice}}</td>
      </tr>
    </table>
    <table>
      <tr>
        <th>No</th>
        <th>ID</th>
        <th>NAME</th>
        <th>PRICE</th>
      </tr>
      <tr v-for="(weapon, index) in dataArr">
        <td>{{index + 1}}</td>
        <td>{{weapon.weaponId}}</td>
        <td>{{weapon.weaponName}}</td>
        <td>{{weapon.weaponPrice}}</td>
      </tr>
    </table>
    <h3>实验17：双向绑定</h3>
    <p>{{farmer}}</p>
    Farmer id：<input type="text" v-model="farmer.farmerId" /><br/>
    Farmer Name：<input type="text" v-model="farmer.farmerName" /><br/>
    Farmer Subject：<input type="text" v-model="farmer.farmerSubject" /><br/>
  </div>
</template>

<!-- style 标签：写 CSS 代码 -->
<style scoped>
button {
  border: 1px solid black;
}
</style>
